<template>
  <!-- 顶部登录栏 -->
  <div class="head-section">
    <div class="container-fluid h-100">
      <div class="row h-100">
        <div class="col content-box">
          <router-link to="/center" class="btn btn-primary float-end"
                       style="background-color: #FB7299; border-color: #FB7299; margin-left: 10px">
            个人
          </router-link>
          <router-link to="/login" class="btn btn-primary float-end"
                       style="background-color: #FB7299; border-color: #FB7299; " @click="userInfo.logout()">
            登出
          </router-link>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <!-- 头部区域 -->
    <div class="header">
      <div class="logo" style="color: #FB7299">
        <i class="fas fa-play-circle" style="color: #FB7299"></i>
        Bilili视频搜索分析平台
      </div>
      <div class="search-box">
        <input
            id="inputBox"
            type="text"
            class="search-input"
            v-model="searchTerm"
            :placeholder="placeholderChange"
            @keyup.enter="performSearch"
        />
        <button class="search-button" @click="performSearch">
          <i class="fas fa-search"></i> 搜索
        </button>
      </div>
    </div>

    <div class="content">
      <!-- 热搜榜 -->
      <div class="trending-box">
        <h2 class="section-title">
          <span class="fas fa-fire" @click="hotMode = 'video'" :class="{'active-title' : hotMode === 'up'}">今日热搜榜</span>
          <span class="fas fa-user-friends" @click="hotMode = 'up'" :class="{'active-title' : hotMode === 'video'}">每周必看</span>
        </h2>
        <div v-if=" hotMode === 'up' ">
          <RecommendedBox/>
        </div>
        <div v-if=" hotMode === 'video' ">
          <TrendingBox/>
        </div>
      </div>
    </div>
  </div>
  <router-view :key="$route.fullPath" />
</template>

<script setup>
import {ref, computed, inject, onMounted} from "vue";
import TrendingBox from "@/components/TrendingBox.vue";
import RecommendedBox from "@/components/RecommendedBox.vue";
import WordCloud from "@/components/WordCloud.vue";
import {useUserStore} from "@/store/user.js";
import {checkCookie} from "@/api/user.js";

const words = [
  {text: "Vue", size: 40},
  {text: "React", size: 28.88},
  {text: "Rust", size: 80}
]

const userInfo = useUserStore();
const searchTerm = ref("");
const hotMode = ref("video");//'up','video'
//BV号正则匹配
const bvPattern = /^BV[a-zA-Z0-9]+$/;
const upPattern = /^\d+$/;
const searchStatues = ref('noInput')//noInput,invalid,notFound\



//执行搜索
const performSearch = async () => {
  const term = searchTerm.value.trim();
  if (bvPattern.test(term)) {
    await videoRequest();
  }
  else if(upPattern.test(term)){
    await upRequest();
  }
  else {
    searchTerm.value = ''
    searchStatues.value = 'invalid';
  }
};
const placeholderChange = computed(() =>{
  if(searchStatues.value === 'notFound')
  {return '非常抱歉，未找到对应的UP或视频';}
  if(searchStatues.value === 'noInput')
  {return '请输入视频的BV号或UP的id';}
  if(searchStatues.value === 'invalid')
  { return '输入格式有误，请检查输入';}
});

import {getUpBasicInfo} from '@/api/user.js'
import {getVideoBasicInfo} from "@/api/video.js";
import router from "@/router/index.js";


const upRequest = async() =>{
  try {
    const term = searchTerm.value.trim();
    const respond = await getUpBasicInfo(term);
    console.log(respond.data);
    await router.push('/up/'+ term)
  }catch (error){
    console.error('请求失败:', error);
    searchStatues.value = 'notFound';
    searchTerm.value = '';
  }
};

const videoRequest = async () =>{
  try {
    const term = searchTerm.value.trim();
    const respond = await getVideoBasicInfo(term);
    console.log(respond.data);
    await router.push('/video/'+ term)
  }catch (error){
    console.error('请求失败:', error);
    searchStatues.value = 'notFound';
    searchTerm.value = '';
  }
}

const checkToken = async () => {
  if (userInfo.cookie !== '') {
    const respond = await checkCookie();
    if (respond.data.code === 200){
      console.log('in');
    }
    else{
      console.log('timeout');
      userInfo.logout();
    }
  } else {
    console.log('out');
    userInfo.logout();
    await router.push('/login');
  }
}

onMounted(()=>{
  checkToken();
})

</script>
<style>
/* 原有CSS样式保持不变 */
:root {
  --primary: #4361ee;
  --primary-light: #4895ef;
  --secondary: #3f37c9;
  --accent: #f72585;
  --success: #4cc9f0;
  --dark: #2b2d42;
  --light: #f8f9fa;
  --gray: #8d99ae;
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

body {
  background: linear-gradient(135deg, #f0f4ff 0%, #e6f0ff 100%);
  color: #333;
  padding: 20px;
  line-height: 1.6;
  min-height: 100vh;
}

.container {
  max-width: 1300px;
  margin: 0 auto;
}

.head-section {
  background: linear-gradient(135deg, #f0f4ff 0%, #e6f0ff 100%);
  height: 8vh;
}

/* 头部区域 */
.header {
  text-align: center;
  margin: 20px 0 40px;
  position: relative;
}

.logo {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
}

.logo:hover {
  transform: translateY(-3px);
}

.search-box {
  display: flex;
  width: 80%;
  max-width: 700px;
  height: 65px;
  margin: 0 auto;
  border-radius: 50px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(67, 97, 238, 0.25);
  transition: var(--transition);
}

.search-box:focus-within {
  box-shadow: 0 8px 30px rgba(67, 97, 238, 0.35);
  transform: translateY(-3px);
}

.search-input {
  flex: 1;
  padding: 0 30px;
  font-size: 18px;
  border: none;
  outline: none;
  background: #fff;
  transition: var(--transition);
}

.search-input:focus {
  background: #f8fbff;
}

.search-button {
  width: 140px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  border: none;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.search-button:hover {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  transform: scale(1.02);
}

/* 内容区域 */
.content {
  display: flex;
  gap: 30px;
  margin-top: 30px;
}

.trending-box {
  background: white;
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  padding: 28px;
  flex: 1;
  transition: var(--transition);
}

.trending-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.section-title {
  font-size: 24px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f4ff;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}

.section-title i {
  font-size: 22px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.active-title{
  color: #FC9FB0
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@media (max-width: 992px) {
  .content {
    flex-direction: column;
  }

  .search-box {
    width: 95%;
  }
}

@media (max-width: 768px) {
  .logo {
    font-size: 2.5rem;
  }

  .search-box {
    height: 55px;
  }
}
</style>